import * as echarts from 'echarts'

const defaultColors = ['#F2627B', '#F29662', '#F2DA1F', '#50CB73', '#35CBCA', '#39A1FE', '#9760E5']

const getPieChart = (data: any) => {
  let { subtext, seriesData, seriesName, colors } = data
  let total = 0
  seriesData.forEach((item: any) => {
    total += item.value
  })
  return {
    color: colors || defaultColors,
    title: {
      text: `${total}`,
      subtext,
      left: '19.5%',
      top: '45%',
      textAlign: 'center',
      textVerticalAlign: 'middle'
    },
    tooltip: {
      trigger: 'item'
    },
    legend: {
      orient: 'vertical',
      left: '50%',
      top: 'center',
      height: '60%',
      icon: 'circle',
      itemWidth: 6,
      itemHeight: 6,
      formatter: function (name: string) {
        return `{title|${name}}    {value|${seriesData.find((item: any) => item.name === name).value}}`
      },
      textStyle: {
        rich: {
          title: {
            fontSize: 12,
            color: '#7D7E82'
          },
          value: {
            fontSize: 12,
            fontWeight: 'bold',
            color: '#1F2128'
          }
        }
      },
      itemGap: 24
    },
    series: [
      {
        name: seriesName,
        type: 'pie',
        radius: ['50%', '90%'],
        center: ['20%', '50%'],
        avoidLabelOverlap: false,
        data: seriesData,
        labelLine: {
          show: false
        },
        label: {
          show: false,
          position: 'center'
        }
      }
    ]
  } as echarts.EChartsOption
}

const iconBase64 =
  ''
const getPieIconChart = (data: any) => {
  let { subtext, seriesData, seriesName, colors } = data
  return {
    color: colors || defaultColors,
    title: {
      subtext,
      left: '50%',
      top: '55%',
      textAlign: 'center',
      textVerticalAlign: 'middle'
    },
    tooltip: {
      show: false
    },
    graphic: {
      elements: [
        {
          type: 'image',
          style: {
            image: iconBase64,
            width: 40,
            height: 40
          },
          left: 'center',
          top: '36%'
        }
      ]
    },
    series: [
      {
        name: seriesName,
        type: 'pie',
        radius: ['50%', '80%'],
        avoidLabelOverlap: false,
        data: seriesData,
        itemStyle: {
          borderColor: '#fff',
          borderWidth: 1
        },
        label: {
          formatter: '{name|{b}}{percent|{c}%}\n',
          minMargin: 5,
          lineHeight: 15,
          rich: {
            name: {
              fontSize: 13,
              fontWeight: 'bold',
              color: '#1F2128'
            },
            percent: {
              fontSize: 13,
              fontWeight: 'bold',
              color: '#1F2128'
            }
          }
        },
        labelLine: {
          length: 10,
          length2: 20
        },
        labelLayout: function (params: any) {
          const isLeft = params.align === 'left'
          const points = params.labelLinePoints
          // Update the end point.
          points[2][0] = !isLeft ? params.labelRect.x : params.labelRect.x + params.labelRect.width
          return {
            labelLinePoints: points
          }
        }
      }
    ]
  } as echarts.EChartsOption
}

export { getPieChart, getPieIconChart }
